<template>
	<div class="box">
		<u-form size="medium" ref="expressForm" :model="order"  label-width="100px">
			<u-form-item label="收货人">{{ order.consignee }}</u-form-item>
			<u-form-item label="联系电话">{{ order.iphone }}</u-form-item>
			<u-form-item label="收货地址">{{ order.address }}</u-form-item>
			<u-form-item label="取消原因" @click="show=true">
				<u-input placeholder="选择物流" readonly v-model="reasons" >
					<template slot="suffix">
						<u-icon name="arrow-down"></u-icon>
					</template>
				</u-input>
				<!-- <el-select v-model="order.r_id"><el-option v-for="item in reasonslist" :key="item.id" :label="item.reason" :value="item.id"></el-option></el-select> -->
			</u-form-item>
			<u-form-item label="描述">
				<u-input type="textarea" :rows="2" placeholder="请输入内容" v-model="order.reason"></u-input>
				</u-form-item>
			<!-- 	<u-form-item><el-button v-if="status == 1" type="primary" @click="saveData">确定取消</el-button></u-form-item> -->
		</u-form>
		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="close">取消</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="saveData">确定</u-button>
		</view>
		<u-picker @cancel="show=false" :show="show" :columns="reasonslist" keyName="reason" @confirm="getreasons"></u-picker>
	</div>
</template>
<script>
export default {
	name: 'orderExpress',
	data() {
		return {
			show:false,
			isLoading: false,
			reasonslist: [],
			disabled: false,
			deliver_type: 1,
			status: 1,
			thirdlist: [
				{
					label: '商家配送',
					value: 0
				}
			],
			fee: 0,
			express_type: 0,
			itemRules: {
				r_id: [
					{
						required: true,
						message: '请选择取消原因'
					}
				]
			},
			cityCode: '',
			reasonslist: [],
			order: {},
			reasons: ''
		};
	},
	// props: {
	//   order: {
	//     type: Object,
	//     default: function() {
	//       return {};
	//     }
	//   }
	// },

	methods: {
		getreasons(e) {
			this.order.r_id = e.value[0].id;
			this.reasons = e.value[0].reason;
			this.show = false;
		},

		init(id) {
			this.orderId = id;
			this.isLoading = true;
			uni.$u.http.get('/shop/order/' + id, {custom: {id: 8}}).then(res => {
				let o = res.msg;
				o.r_id = '';
				o.reason = '';
				this.order = o;
				this.getdadareasons();
				this.$nextTick(() => {
					this.$refs.expressForm.setRules(this.itemRules);
				});
			});
		},
		getdadareasons() {
			// this.cancalobj.oid = this.order.id;
			uni.$u.http.get('/shop/dada/reasons', {params: {oid: this.order.id, custom: {id: 8}}}).then(res => {
				this.reasonslist = [res.msg.result];
			});
		},
		formalCancel() {
			uni.$u.http.post('/shop/dada/formalCancel', this.cancalobj, {custom: {id: 8}}).then(res => {
				this.showCancellocal = false;
				this.getDataList();
			});
		},

		//选择门店自动激活选中当前记录
		selItem(i) {
			this.order.orderCommoditys[i].isSelected = true;
		},

		//保存数据(发货)
		saveData() {
			this.$refs.expressForm.validate().then(valid=> {
				if (valid) {
					if (!this.order.r_id) {
						this.$message.error('请选择取消原因');
						return false;
					}
					let _data = {};
					_data.oid = this.order.id;
					_data.id = this.order.r_id;
					_data.reason = this.order.reason;
					uni.$u.http.post('/shop/dada/formalCancel', _data,{custom: {id: 8}}).then(res => {
						this.$emit('success');
					});
				} else {
					return false;
				}
			});
		},
		close() {
			this.$emit('close', 'showCancellocal');
		}
	}
};
</script>

<style lang="scss" scoped>
.u-form-item {
	margin-bottom: 15px;
}

//选择商品
.proSelect {
	width: 100%;
	border: 1px solid #dcdfe6;
	//margin-bottom: 10px;

	.phead {
		background: #f4f6f8;
		font-weight: 700;
		display: flex;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #dcdfe6;

		.name {
			flex: 1;
			padding-left: 10px;
		}

		.store {
			width: 180px;
			text-align: center;
		}

		.count {
			width: 80px;
			text-align: center;
		}

		.status {
			width: 80px;
			text-align: center;
		}

		.action {
			width: 100px;
			text-align: center;
		}
	}

	ul {
		margin: 0;
		max-height: 210px;
		overflow-y: auto;

		li {
			display: flex;
			cursor: pointer;
			line-height: 40px;
			padding: 10px 0;
			font-size: 13px;
			border-bottom: 1px solid #dcdfe6;
			padding-left: 10px;

			&:last-child {
				border-bottom: none;
			}

			.pro {
				display: flex;
				flex: 1;

				.txt {
					display: flex;
					padding-left: 10px;
					flex: 1;
					line-height: 18px;
					align-items: center;

					.mark {
						color: #f56c6c;
						background: #f2f4f6;
						display: table;
						border-radius: 5px;
						padding: 0 3px;
						margin-right: 3px;
					}
				}
			}

			.store {
				width: 180px;
				text-align: center;
			}

			.count {
				width: 80px;
				text-align: center;
			}

			.status {
				width: 80px;
				text-align: center;

				&.done {
					color: #67c23a;
				}

				&.none {
					color: #f56c6c;
				}
			}

			.action {
				width: 100px;
				text-align: center;
			}
		}
	}
}

.el-input {
	width: 270px;
}

.box {
	width: 100%;
	/*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
